<template>
    <MenuView />

    <div class="contextContainer">
        <UserView />

        <div class="contextTable">
            <div class="tableContainer">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f0f8ff' }"
                    :cell-style="{ 'text-align': 'center', 'letter-spacing': '1px', 'font-weight': '600' }">
                    <el-table-column fixed prop="commentId" label="评论ID" width="180" />
                    <el-table-column prop="commentFood" label="菜品编号" width="180" />
                    <el-table-column prop="commentUser" label="用户ID" width="180" />
                    <el-table-column prop="commentDate" label="评论时间" width="180" />
                    <el-table-column prop="commentContent" label="评论内容" width="400" />
                    <el-table-column fixed="right" label="操作" min-width="100">
                        <template #default="scope">
                            <el-button type="danger" :icon="Delete" @click="deleteRow(scope.row)">删除评论</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '../request/axios';
import { ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import MenuView from '../components/MenuView.vue';
import UserView from '../components/UserView.vue';

let tableData = ref();

const deleteRow = (row) => {
    request.post("/comment/manager/delComment", {
        commentId: row.commentId,
    })
    .then((res) => {
        if (res.code === "200") {
                ElMessage.success("评论删除成功");
                getTableData();
            }
    })
};

const getTableData = () => {
    request.get("/comment/manager/getCommentList")
        .then((res) => {
            if (res.code === "200")
                tableData.value = res.data;
        });
};

onMounted(getTableData);
</script>

<style>
body,
#app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0%;
    padding: 0%;
}

.contextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100%;
}

.contextTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 95%;
    background-color: antiquewhite;
}

.tableContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
</style>